<template>
  <div class="evolution-card" ref="evolution">
    <el-card shadow="never">
      <div slot="header" class="title">
        <span>企业沿革情况分析</span>
      </div>
      <echarts
          id="evaluation-card"
          v-if="echartHeight"
          :options="options"
          :width="echartWidth"
          :height="echartHeight"
      />
    </el-card>
  </div>
</template>

<script>
import Echarts from '../echarts/index.vue'

export default {
  name: 'EvolutionCard',
  components: { Echarts },
  data () {
    return {
      echartWidth: null,
      echartHeight: null,
      options: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.echartWidth = this.$refs.evolution.clientWidth - 20 * 2
      const headerHeight = document.getElementsByClassName('el-card__header')[0].offsetHeight
      this.echartHeight = this.$refs.evolution.clientHeight - headerHeight - 20 * 2
    })
  }
}
</script>

<style lang="scss" scoped>
.evolution-card {
  .el-card {
    /deep/ .el-card__header {
      padding: 15px 20px !important;
    }
  }

  .title {
    line-height: 24px;

    span {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>